import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Modal, Select } from 'antd';
import { adminCompanyType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import { apiProductLineGetList } from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();

  const [lineData, setLineData] = useState([]);
  const [lineValue, setLineValue] = useState('');
  const { loading: lineDataLoading, run: getLineData } = useRequest(
    apiProductLineGetList,
    {
      manual: true,
      throttleInterval: 500,
      onSuccess: (res, params) => {
        setLineData(res.data);
      },
    },
  );
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useEffect(() => {
    getLineData({
      pageNo: 1,
      pageSize: 10,
    });
    getForm(form);
  }, []);

  useUpdateEffect(() => {
    getLineData({
      productLine: lineValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [lineValue]);

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <FormItem
          rules={[{ required: true, message: '请选择公司' }]}
          {...formItemLayout}
          label={'公司'}
          name="company"
        >
          <Select>
            {adminCompanyType.map(item => (
              <Select.Option key={item.value} value={item.value}>
                {item.label}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          rules={[{ required: true, message: '请输入产线名称' }]}
          {...formItemLayout}
          label={'产线名称'}
          name="productLine"
        >
          <Input />
        </FormItem>
        <FormItem {...formItemLayout} label={'备注'} name="remark">
          <Input.TextArea rows={4} />
        </FormItem>
      </Form>
    </Modal>
  );
};
export default Detail;
